<template>
  <div class="container">
    <h1 class="topTitle">热力图</h1>
    <div style="height: 600px; width: 100%">
      <l-map class="map" ref="map" :options="mapOptions" @ready="doSomethingOnReady()">
         <l-tile-layer :url="mapOptions.url"></l-tile-layer>
        <l-control-zoom position="topleft" zoom-in-title="放大" zoom-out-title="缩小"></l-control-zoom>
        <l-control :position="'bottomleft'" class="example-custom-control">
          <div class="legend-loading" v-show="loadingText!=''">{{loadingText}}...</div>
          <div class="legend-area" v-show="this.heatmapLayer.visible">
            <h4>热力图图例</h4>
            <span id="min">{{heatLegend.min}}</span>
            <span id="max">{{heatLegend.max}}</span>
            <img  :src="heatLegend.gradientImg" style="width:300px" />
          </div>
        </l-control>
      </l-map>
    </div>
  </div>
</template>

<script>

  import * as L from "leaflet";
  import HeatmapOverlay from "heatmap.js/plugins/leaflet-heatmap";

  export default {
  name: "HeatLayerPage",
  components: {
  },
  data() {
    return {
      map:null,
      //地图参数
      mapOptions:{
        attributionControl :false,
        zoomControl:false,
        minZoom: 2,
        maxZoom: 14,
        zoom: 6,
        center: {'lon':116.404,'lat':39.915},
        preferCanvas: true,
        url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
        attribution:  '&copy; WebGis',
      },
      heatmapLayer: {
        instance:null,
        heatmapcfg : //热力图配置
                {
                  '/': 0.191,
                  'maxOpacity': 0.8,
                  'scaleRadius': true,
                  'useLocalExtrema': true,
                  latField: 'lat',
                  lngField: 'lng',
                  valueField: 'count',

                },
        heatmapData://热力图数据
                {
                  max: 0,
                  data: [
                    { lat: 39.09596, lng: 116.03759, count: Math.random() * 1001 },
                    { lat: 39.91314, lng: 116.37190,  count: Math.random() * 100 },
                    { lat: 39.91314, lng: 116.31190,  count: 9 },
                    { lat: 39.91314, lng: 116.35190,  count: 8 },
                    { lat: 39.91314, lng: 116.38190,  count: 7 },
                  ]
                },
        visible:true
      },
      //热力图绘图相关
      heatLegend:{
        legendCanvas:null,
        legendCtx:null,
        gradientCfg:null,
        gradientImg:null,
        min:0,
        max:0
      },
      loadingText:''//加载中提示
    }
  },
  methods: {
    doSomethingOnReady() {
      this.map = this.$refs.map.mapObject

      this.heatmapLayer.instance = new HeatmapOverlay(this.heatmapLayer.heatmapcfg)
      this.heatmapLayer.instance.setData(this.heatmapLayer.heatmapData)
      this.heatLegend.legendCanvas = document.createElement('canvas');
      this.heatLegend.legendCtx =this.heatLegend.legendCanvas.getContext('2d');

      let that = this;
      this.heatmapLayer.heatmapcfg.onExtremaChange = function(data) {
        console.log(data)
        console.log(that.heatLegend)
        that.heatLegend.min = data.min;
        that.heatLegend.max = data.max;
        // regenerate gradient image
        if (data.gradient != that.heatLegend.gradientCfg) {
          that.heatLegend.gradientCfg = data.gradient;
          var gradient = that.heatLegend.legendCtx.createLinearGradient(0, 0, 300, 1);
          for (var key in that.heatLegend.gradientCfg ) {
            gradient.addColorStop(key, that.heatLegend.gradientCfg[key]);
          }
          that.heatLegend.legendCtx.fillStyle = gradient;
          that.heatLegend.legendCtx.fillRect(0, 0, 300, 10);
          that.heatLegend.gradientImg = that.heatLegend.legendCanvas.toDataURL();
        }
      }


      this.heatmapLayer.instance.addTo(this.$refs.map.mapObject);//添加到地图上


    },
  },
}
</script>

<style lang="stylus" scoped>
.container
  width: 100%
  h1.topTitle
    text-align: center

.legend-area
  height :40px;
  width :300px;
  padding:10px;
  background:white;
  outline:3px solid black;
  line-height:1em;
  h4
    margin:0;
    padding:0;
    margin-bottom:5px;
  #min
    float:left;
  #max
    float:right;
  span
    font-size:14px; margin:0; padding:0;
.legend-loading
  background:white;
</style>